<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <link rel="stylesheet" href="./style.css">
  <title>mm.Player</title>
  <style>
    td {
      min-width: 100px;
    }
  </style>
</head>

<body>
  <h1>mm.Player</h1>
  <p>An <code>mm.Player</code> is a class that playes <code>NoteSequences</code>.
    Below you can play the same melody using each of the available players</p>

  <h2>Controls</h2>
  <section>
    <p>You can start, stop, pause and unpause a Player: </p>
    <button id="play">Play</button>
    <button id="stop" disabled>Stop</button>
    <button id="pause" disabled>Pause</button>
    <button id="resume" disabled>Resume</button>
    <b>Play state: </b><span id="playState"></span>
  </section>

  <h2>SoundFonts</h2>
  <section>
    <p>There are several SoundFonts that you can use with the
      <code>mm.SoundFontPlayer</code>, for more realistic sounding instruments:</p>
    <table>
      <thead>
        <td><b>Instrument</b></td>
        <td><b>Name</b></td>
        <td></td>
        <td>License</td>
      </thead>
      <tbody>
        <tr>
          <td>Piano</td>
          <td>salamander</td>
          <td><button id="playSF_0">Play</button></td>
          <td>Audio samples from <a href="https://archive.org/details/SalamanderGrandPianoV3">Salamander Grand Piano</a></td>
        </tr>
        <tr>
          <td>Multi</td>
          <td>sgm_plus</td>
          <td><button id="playSF_1">Play</button></td>
          <td>Audio samples from <a href="https://www.polyphone-soundfonts.com/en/files/27-instrument-sets/256-sgm-v2-01">SGM</a> by Shan</td>
        </tr>
        <tr>
          <td>Percussion</td>
          <td>jazz_kit</td>
          <td><button id="playSF_2">Play</button></td>
          <td>Audio samples from <a href="https://musical-artifacts.com/artifacts/686">Jazz Kit (EXS)</a> by Lithalean</td>
        </tr>
      </tbody>
    </table>
  </section>


  <h2>Unquantized NoteSequences</h2>
  <section>
    <b>Base player</b>
    <div id="unq-player"></div>
    <b>SoundFont player</b>
    <div id="unq-soundfont"></div>
  </section>

  <h2>Quantized NoteSequences</h2>
  <section>
    <b>Base player (with or without click)</b>
    <div id="q-player"></div>
    <b>SoundFont player</b>
    <div id="q-soundfont"></div>
  </section>

  <h2>Quantized Drum NoteSequences</h2>
  <section>
    <b>Base player (with or without click)</b>
    <div id="d-player"></div>
    <b>SoundFont player</b>
    <div id="d-soundfont"></div>
  </section>

  <h2>Changing the tempo</h2>
  <p>You can update the tempo at which a <code>mm.Player</code> is playing a
    <code>NoteSequence</code> by calling <code>setTempo()</code>. To see this,
    start one of the melodies below, and adjust the tempo slider.
  </p>

  <section>
    <div>
      <button id="playBtn">Play</button>
      <b>Tempo:</b>
      <input type="range" id="tempo" min="20" max="240" value="120" step="1" oninput="tempoValue.value = tempo.value">
      <output id="tempoValue">120</output>
    </div>
    <div class="visualizer-container" id="container">
      <svg class="svg"></svg>
    </div>
  </section>

  <h2>NoteSequences with velocities</h2>
  <p>They work!</p>
  <section>
    <b>SoundFont player</b>
    <div id="s-v-player"></div>
    <b>Base player (with or without click)</b>
    <div id="v-player"></div>
    <b>Drum player (with or without click)</b>
    <div id="d-v-player"></div>
  </section>

  <h2>Controlling the attack or release of a note</h2>
  <p>Using the SoundFont player, you can control the timing of the attack
    or the release of a key. This is useful if you need real-time note
    playing, rather than of a predetermined NoteSequence.</p>
  <section>
    <button id="attackSoundFont">Attack</button>
    <button id="releaseSoundFont">Release</button>
  </section>

  <h2>Using WebMIDI</h2>
  <p>If you want to use a connected MIDI output, you can use a <code>MIDIPlayer</code>
  to output to it:</p>
  <section>
    MIDI Outputs: <select id="midi-outputs"></select>
    <button id="midi-play">Play</button>
  </section>

  <script src="player_bundle.js"></script>
</body>

</html>
